<template>
  <div
    style="margin-top: 30px; margin-bottom: 30px"
    class="contact_wrap"
    :style="{ backgroundColor: modelValue?.bgColor }"
    @mouseenter="isHover = true"
    @mouseleave="isHover = false"
  >
    <!-- <a-row
      class="count_down"
      :class="[
        modelValue?.width
          ? `container-content-${modelValue?.width}`
          : 'container-content',
      ]"
    > -->
    <div class="contact-us-list">
      <div>
        <ul class="contact-us-list__list">
          <a-row style="display: flex">
            <a-col
              :sm="{ span: modelValue?.columns === 2 ? 12 : 24 }"
              :md="{ span: modelValue?.columns === 2 ? 12 : 24 }"
              :lg="{ span: modelValue?.columns === 2 ? 12 : 24 }"
              :xl="{ span: modelValue?.columns === 2 ? 12 : 24 }"
              v-for="item in modelValue?.data"
              style="margin-top: 16px"
            >
              <li class="contact-us-list__item">
                <h6 class="contact-us-list__item__name">{{ item.name }}</h6>
                <p class="contact-us-list__item__title">{{ item.title }}</p>
                <div class="contact-us-list__item__region">
                  {{ item.region }}
                </div>
                <div class="contact-us-list__item__link">
                  <div class="icon-link icon-link--md">
                    <a
                      :href="`mailto:${item.link}`"
                      target="_blank"
                      class="icon-link__wrapper"
                      ><span
                        class="icon-link__icon"
                        :style="{ '--icon-url': `url(${iconEmailUrl})` }"
                      ></span>
                      <div class="icon-link__text">
                        <span>{{ item.link }}</span>
                      </div></a
                    >
                  </div>
                </div>
              </li>
            </a-col>
          </a-row>
        </ul>
      </div>
    </div>
    <!-- 左侧文本 后侧媒体 -->
    <!-- 左侧一直是一半，但只有左侧时是100% -->
    <!-- <a-col :sm="{ span: 24 }" :md="{ span: hasMedia ? 12 : 24 }"> </a-col>
      <a-col v-if="hasMedia" :sm="{ span: 24 }" :md="{ span: 12 }"> </a-col> -->
    <!--  -->
    <Operate
      v-if="!isPreview"
      v-model:show="isHover"
      @handle-edit="showSetting = true"
      @handle-delete="handleDelete"
      @handle-copy="handleCopy"
      @handle-paste="handlePaste"
    ></Operate>
    <!-- </a-row> -->
  </div>

  <Setting v-if="!isPreview" v-model:show="showSetting" :data="modelValue"></Setting>
</template>

<script lang="ts" setup>
import { computed, nextTick, ref } from "vue";
import { randomString } from "@/utils/common";
import Setting from "./setting.vue";
import Operate from "@/common/Operate/index.vue";
import iconEmailUrl from "@/assets/icon-email.svg";

// 定义组件名称
defineOptions({
  name: "ContactUsList",
});

const props = defineProps({
  modelValue: {
    type: Object,
    default: () => {},
  },

  // 是否预览
  isPreview: {
    type: Boolean,
    default: true,
  },
});
console.log("!!!!", props.modelValue);
const emit = defineEmits([
  "update:modelValue",
  "handleDelete",
  "handleCopy",
  "handlePaste",
]);

const isHover = ref<boolean>(false);
const showSetting = ref<boolean>(false);

const handleDelete = () => {
  emit("handleDelete", props.modelValue.id);
};

const handleCopy = () => {
  emit("handleCopy", props.modelValue);
};

const handlePaste = (type: string) => {
  emit("handlePaste", type);
};

const handleInit = () => {
  if (props.modelValue && props.modelValue.data && props.modelValue.data.length) return; // 有数据不用初始化
  const data = {
    id: props.modelValue?.id || randomString(),
    type: "ContactUsList",
    columns: 2,
    data: [
      {
        name: "New Contact111",
        title: "title1111",
        region: "region111",
        link: "111@qq.com",
        id: randomString(),
      },
      {
        name: "New Contact111222",
        title: "title12222",
        region: "region111",
        link: "111@qq.com",
        id: randomString(),
      },
      {
        name: "New Contac33333",
        title: "title3333",
        region: "region33333",
        link: "111@qq.com",
        id: randomString(),
      },
    ],
  };
  emit("update:modelValue", data);
};

handleInit();
</script>

<style lang="scss" scoped>
.contact_wrap {
  text-align: center;
  display: block;
  position: relative;
}

.contact-us-list__list {
  --bs-gutter-y: 36px;
}

@media (max-width: 1023.98px) {
  .contact-us-list__list {
    --bs-gutter-y: 24px;
  }
}

@media (max-width: 767.98px) {
  .contact-us-list__list {
    --bs-gutter-y: 16px;
  }
}
.contact-us-list__item {
  text-align: left;
}

.contact-us-list__item__name {
  color: #0032a0;
}

.contact-us-list__item__title {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.428;
  color: #2a3b4d;
  margin-top: 4px;
}

@media (max-width: 1023.98px) {
  .contact-us-list__item__title {
    line-height: 1.285;
    letter-spacing: 0.03em;
    font-weight: 400;
  }
}

@media (max-width: 767.98px) {
  .contact-us-list__item__title {
    font-size: 13px;
    line-height: 1.33;
    letter-spacing: 0.02em;
  }
}

@media (min-width: 768px) {
  .contact-us-list__item__title {
    max-width: 240px;
  }
}

@media (max-width: 767.98px) {
  .contact-us-list__item__title {
    margin-top: 2px;
  }
}

.contact-us-list__item__region {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.214;
  color: #2a3b4d;
}

@media (max-width: 1023.98px) {
  .contact-us-list__item__region {
    font-size: 13px;
    line-height: 1;
    letter-spacing: 0.04em;
  }
}

@media (max-width: 767.98px) {
  .contact-us-list__item__region {
    line-height: 1.33;
  }
}

.contact-us-list__item__link {
  margin-top: 4px;
}

.icon-link {
  display: flex;
}

.icon-link__wrapper {
  border: none;
  background: none;
  color: #0032a0;
  color: var(--text-color--primary, #0032a0);
  text-decoration: none;
  display: flex;
  align-items: center;
  padding: 0;
}

.icon-link__wrapper:hover .icon-link__text span {
  background-size: 100% 1px, 0 1px;
}

.icon-link__icon {
  width: 24px;
  height: 24px;
  background-image: var(--icon-url);
  background-size: contain;
  background-repeat: no-repeat;
  flex-shrink: 0;
}

@media (max-width: 767.98px) {
  .icon-link__icon {
    width: 16px;
    height: 16px;
  }
}

.icon-link__icon--jump {
  transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.icon-link__icon--jump:hover {
  transform: translateY(-8px);
}

.icon-link__text {
  margin-left: 8px;
}

@media (max-width: 767.98px) {
  .icon-link__text {
    margin-left: 4px;
  }
}

.icon-link__text span {
  text-decoration: none;
  background-image: linear-gradient(90deg, #0032a0, #0032a0);
  background-image: linear-gradient(
    90deg,
    var(--text-color--primary, #0032a0),
    var(--text-color--primary, #0032a0)
  );
  background-size: 0 1px, 100% 1px;
  background-position: 0 100%, 100% 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s;
  padding-bottom: 2px;
}

.icon-link__text--pure-text {
  margin-left: 0;
}

@media (max-width: 767.98px) {
  .icon-link__text--pure-text {
    margin-left: 0;
  }
}

.icon-link__text.disable-effect span {
  background: none;
}

.icon-link--sm .icon-link__wrapper .icon-link__text {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.285;
  letter-spacing: 0.04em;
}

@media (max-width: 1023.98px) {
  .icon-link--sm .icon-link__wrapper .icon-link__text {
    line-height: 1.428;
  }
}

@media (max-width: 767.98px) {
  .icon-link--sm .icon-link__wrapper .icon-link__text {
    line-height: 1.285;
  }
}

.icon-link--md .icon-link__wrapper .icon-link__text {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
}

@media (max-width: 1023.98px) {
  .icon-link--md .icon-link__wrapper .icon-link__text {
    font-size: 14px;
    line-height: 1.714;
    letter-spacing: 0.01em;
  }
}

.icon-link--light .icon-link__wrapper .icon-link__text {
  color: #fff;
}

.icon-link--light .icon-link__wrapper .icon-link__text span {
  background-image: linear-gradient(90deg, #fff, #fff);
}
</style>
